<template>
  <ex_super_table_page v-bind="option" class="page-container" ref="SuperTablePage">

    <template v-slot:priceInfo="{row}">

      <!-- 价卡信息 -->
      <div
          style="display: flex;  line-height: 32px; flex-direction: column; flex:1; "
          :class=" (row.status=='DISABLED'? 'disable-class': '') + ' '">

        <div
            style="display: flex;  align-items: center;  line-height: 32px;  flex-direction: row;"
            class="price-version-row-div">

          <div
              style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">
            <template>
              标准价卡
            </template>
          </div>
          <div style="flex: 1;  margin-left: 12px;">
            <template>
                <span v-for="(item,index) in row.standardPriceVersions">
                  <span :class=" isExpired(item.versionEndTime) ? `tag-red tag-product`: `tag-blue tag-product`">
                  <i class="el-icon-check"
                     v-if="index==0 && row.status==='ENABLE' && !isExpired(item.versionEndTime)  ">生效中</i>
                  <i class="el-icon-warning-outline" v-if="isExpired(item.versionEndTime)">>已过期</i>
                    {{ $dateFormatDate(item.versionStartTime) }}
                    <template v-if="index === row.standardPriceVersions.length -1 ">{{
                        ' 至 ' + $dateFormatDate(item.versionEndTime)
                      }}</template>

                  </span>
                  </span>
            </template>
          </div>

          <div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">
            <el-button type="text"
                       v-auth="'pms_insurance_product_edit'"
                       @click="$router.push({
                      path: '/page/pms/insurance_product_edit',
                      query: { id: row.id, edit: true }
                    })">编辑产品
            </el-button>

            <ex-button-delete
                v-if="row.status=='ENABLE'"
                v-auth="'pms_insurance_product_disable'"

                deleteUrl="/fms-api/product/PmsInsuranceProductRpc/updateStatus.json"
                :deleteParam="{ 'id': row.id, 'status': 'DISABLED'}"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认禁用该产品？"
                label="禁用产品"
            >
            </ex-button-delete>
            <ex-button-delete
                v-if="row.status=='DISABLED'"
                v-auth="'pms_insurance_product_disable'"

                deleteUrl="/fms-api/product/PmsInsuranceProductRpc/updateStatus.json"
                :deleteParam="{ 'id': row.id, 'status': 'ENABLE' }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认启用该产品？"
                label="启用产品"
            >
            </ex-button-delete>

            <el-button type="text" @click="addNewCustomerPrice(row) " style="margin-left: 0px;">添加客户价卡</el-button>
          </div>
        </div>

        <div
            v-for="(item,index) in row.customerPriceVersions"
            style="display: flex; align-items: center;   line-height: 32px;  flex-direction: row;"
            :class="(item.status=='DISABLED'? 'disable-class': '') + ' price-version-row-div'">
          <div
              style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">
            {{ item.versionName }}
          </div>
          <div style="flex: 1;  margin-left: 12px;">
              <span v-for="(subItem,index) in item.versions">
                <span :class="isExpired(subItem.versionEndTime) ? `tag-red tag-product`: `tag-blue tag-product`">

                  <i class="el-icon-check"
                     v-if="index==0 && item.status=='ENABLE' && isExpired(subItem.versionEndTime) ">生效中</i>
                  <i class="el-icon-warning-outline" v-if="isExpired(subItem.versionEndTime)">>已过期</i>

                {{ $dateFormatDate(subItem.versionStartTime) }}
                <template v-if="index == item.versions.length - 1 ">{{
                    ' 至 ' + $dateFormatDate(subItem.versionEndTime)
                  }}</template>
                     </span>
                </span>
          </div>
          <div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">

            <el-button type="text"
                       v-auth="'pms_insurance_product_edit'"

                       @click="$router.push({
                      path: '/page/pms/insurance_product_edit_customer',
                      query: { 'pid': row.id, 'vid': item.versionId }
                    })">编辑价卡
            </el-button>

            <ex-button-delete
                v-if="item.status=='ENABLE'"
                v-auth="'pms_insurance_product_disable'"

                deleteUrl="/fms-api/product/PmsInsuranceCustomerPriceRpc/updateStatus.json"
                :deleteParam="{ 'id': item.versionId, 'status': 'DISABLED'}"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认禁用该价卡？"
                label="禁用价卡"
            >
            </ex-button-delete>
            <ex-button-delete
                v-else
                v-auth="'pms_insurance_product_disable'"

                deleteUrl="/fms-api/product/PmsInsuranceCustomerPriceRpc/updateStatus.json"
                :deleteParam="{ 'id': item.versionId, 'status': 'ENABLE' }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认启用该价卡？"
                label="启用价卡"
            >
            </ex-button-delete>


            <ex-button-delete
                v-auth="'pms_insurance_product_edit'"

                deleteUrl="/fms-api/product/PmsInsuranceCustomerPriceRpc/remove.json"
                :deleteParam="{ 'id': item.versionId }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认删除价卡吗？"
                label="删除价卡"
            >
            </ex-button-delete>

            <el-button type="text" @click="
                $refs['insurancePermissionDialog'].showDialog({
                  'showType': 'version',
                  'productId': row.id,
                  'productCode': row.productCode,
                  'productName': row.productName ,
                  'versionId': item.versionId,
                  'versionName': item.versionName,
                  'customerViewType': 'WHITE'

                }) " style="margin-left: 0px;">生效客户
            </el-button>

          </div>
        </div>

      </div>
    </template>
    <template v-slot:permission>
      <insurancePermissionDialog ref="insurancePermissionDialog"></insurancePermissionDialog>
    </template>

  </ex_super_table_page>
</template>

<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';
import insurancePermissionDialog from "@/component/pms/insurance_customer_permisssion_dialog.vue";

let emitKey = 'pms>insurance_product'
export default {

  title: '保险产品管理',
  mixins: [superTablePageFunction, emitOnFunction(emitKey)],
  components: {insurancePermissionDialog},

  data() {
    let _this = this
    return {
      option: {
        search: {
          model: [
            {slot: "permission"},
            // 产品名
            {label: "label_pms_product_name", key: "productName",},
            // 状态
            {
              label: "label_pms_product_status",
              key: "status",
              type: 'select',
              enum: 'IsAvailableStatusEnum',
              attrs: {clearable: true}
            }
          ],
        },
        action: [
          {
            // 新增保险产品
            label: "label_pms_add_new_insruance_product", auth: 'pms_insurance_product_edit',
            attrs: {icon: "el-icon-plus"}, click: () => {
              this.$router.push({
                path: '/page/pms/insurance_product_edit', query: {emitKey}
              });
            }
          }
        ],

        table: {
          url: "/fms-api/product/PmsInsuranceProductRpc/selectAll.json",
          model: [

            // 保险产品名称
            {key: 'productName', label: 'label_pmsinsruance_product_name', align: 'left'},
            // 产品编码
            {key: 'productCode', label: 'label_pms_product_code', align: 'left'},
            {
              // 关联的供应商
              key: 'supplyProductList', label: 'label_pms_ref_supply_name', align: 'left', attrs: {
                formatter: (r, c, v, i) => {
                  if (v && v.length > 0)
                    return v.map(e => e.productName).join(', ')
                  else
                    return ''
                }
              }
            },
            {
              // 禁止投保sku类目
              key: 'disableSkuCategoryList', label: 'label_pms_disabled_sku_cates', align: 'left', attrs: {
                formatter: (r, c, v, i) => {
                  if (v && v.length > 0)
                    return v.map(e => e.skuCategoryNames[e.skuCategoryNames.length - 1]).join(', ')
                  else
                    return ''
                }
              }
            },
            // // 状态
            // { key: 'status', label: 'label_pms_product_status', formatter: (r, c, v, i) => this.$enumShow(v, "IsAvailableStatusEnum") },
            // // 创建人
            // { key: 'creator', label: 'label_create_user', },
            // // 最后修改
            // { key: 'modifier', label: 'label_modify_user' },
            // // 最后修改时间
            // { key: 'gmtModify', label: 'label_modify_time', attrs: { formatter: (r, c, v, i) => { return this.$dateFormat(v) } } },

            {slot: "priceInfo", label: '价卡配置', align: 'left', 'min-width': 800},
            // {
            // type: 'operate', width: 220, operate: [
            //   {
            //
            //     // 编辑
            //     label: "label_edit", click: (row) => {
            //       this.$router.push({
            //         path: '/page/pms/insurance_product_edit',
            //         query: { id: row.id, emitKey, edit: true }
            //       })
            //     }
            //   },
            //
            //   {
            //     // 启用
            //     label: "label_start_using",
            //     type: 'confirm-button',
            //     url: '/fms-api/product/PmsInsuranceProductRpc/updateStatus.json',
            //     message: _this.$tt('label_sure_to_enable_this'),
            //     if: row => !row.status || row.status == 'DISABLED',
            //     params: (row) => {
            //       return { id: row.id, status: 'ENABLE' }
            //     },
            //     done: ['reload', 'tip']
            //   },
            //   {
            //     // 禁用
            //     label: "label_disable_using",
            //     type: 'confirm-button',
            //     url: '/fms-api/product/PmsInsuranceProductRpc/updateStatus.json',
            //     message:   this.$tt('label_sure_to_disable_this'),
            //     if: row => row.status == 'ENABLE',
            //     params: (row) => {
            //       return { id: row.id, status: 'DISABLED' }
            //     },
            //     done: ['reload', 'tip']
            //   },
            //   // {
            //   //   label: "删除",
            //   //   type: 'confirm-button',
            //   //   url: '/fms-api/product/PmsInsuranceProductRpc/remove.json',
            //   //   message: '确定要删除该记录吗？',
            //   //   params: (row) => {
            //   //     return { id: row.id }
            //   //   },
            //   //   done: ['reload', 'tip']
            //   // }
            //
            // ]
            // }
          ]

        }

      },


    };
  },

  created() {
  },

  destroyed() {
  },

  methods: {
    // 判断是否过期
    isExpired(time) {
      return time < new Date().getTime()
    },
    addNewCustomerPrice(row) {

      let _this = this

      _this.$ajax({
        url: '/fms-api/product/PmsInsuranceCustomerPriceRpc/getRandomId.json',
        data: {
          "productId": row.id
        },
        success: (res) => {
          let tmpId = res.data
          _this.$router.push({
            path: '/page/pms/insurance_product_edit_customer',
            query: {'pid': row.id, 'vid': tmpId}
          })
        },
        afterAjax() {

        }
      });

    }

  }
};

</script>
<style>


.tag-orange {
  border: 1px solid #e37324;
  color: #e37324;
  padding: 2px 6px 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-red {
  border: 1px solid #c42020;
  color: #c42020;
  padding: 2px 6px 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-pink {
  border: 1px solid #bb3cdb;
  color: #bb3cdb;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-blue {
  border: 1px solid #2d8ae5;
  color: #2d8ae5;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-blue2 {
  border: 1px solid #2d8ae5;
  background-color: #2d8ae5;
  color: #fff;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-orange {
  border: 1px solid #ec9146;
  color: #ec9146;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-green {
  border: 1px solid #278000;
  color: #278000;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-green2 {
  border: 1px solid #278000;
  background-color: #278000;
  color: #fff;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-yellow {
  border: 1px solid #c6ab0a;
  color: #c6ab0a;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.tag-gray {
  border: 1px solid #807e7e;
  color: #807e7e;
  padding: 1px 6px 1px 6px;
  border-radius: 6px;
  margin-right: 10px;
  word-break: keep-all;
}

.product-table-td {
  vertical-align: top;
}

.disable-class .tag-product {
  color: #b4b4b4;
  border: 1px solid #b4b4b4;
}


.price-version-row-div:hover {
  background-color: #ebfbff;
}
</style>
